<script setup>
import { ref, defineExpose, defineEmits } from 'vue'
import { CloseCircleOutlined } from '@ant-design/icons-vue'
const state = ref({
  checked1: false,
})
defineExpose({
  state,
})
const emit = defineEmits('closeBoard')
const handleClickCloseFn = () => {
  emit('closeBoard', { isClose: false })
}
</script>
<template>
  <div class="setting-page">
    <div class="setting-box">
      <div class="title">
        设置
        <div class="close" @click="handleClickCloseFn"><CloseCircleOutlined /></div>
      </div>
      <a-space direction="vertical">
        <div>
          <span style="padding-right: 10px">音频：</span
          ><a-switch
            v-model:checked="state.checked1"
            checked-children="开"
            un-checked-children="关"
          />
        </div>
      </a-space>
    </div>
  </div>
</template>
<style scoped lang="less">
.setting-page {
  position: fixed;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.1);
  .setting-box {
    width: 500px;
    height: 300px;
    background: url('./../../../assets/board.jpg') no-repeat center center;
    background-size: 100% 100%;

    .title {
      position: relative;
      text-align: center;
      padding: 20px 0;
      border-bottom: 5px rgb(187, 121, 60) solid;
      font-size: 40px;
      .close {
        position: absolute;
        right: 10px;
        top: 5px;
      }
    }
    :deep(.ant-space) {
      font-family: 'XiangJiaoFont', Arial, sans-serif;
      padding: 10px 20px;
      font-size: 35px;
    }
  }
}
</style>
